<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta name="HandheldFriendly" content="true">
    <title>缴费明细列表</title>
</head>
<style>
    body {
        background: #eae4e4;
    }

    .ui-container {
        /*margin: 0 1em;*/
        /*padding-top: 3em;*/
        background-color: #fff;
        position: relative;
        font-size: .16rem;
    }

    .event-list {
        width: 100%;
    }

    .event-list th,
    .event-list td {
        padding: .6em 0;
        /*font-size: .75em;*/
        text-align: center;
        width: 34%;
        border-bottom: 1px solid #e6dbdb;
    }

    .event-list tr {
        width: 100%;
        display: inline-table;
    }

    .event-list th {
        color: #aaabad;
        background-color: #f3f3f3;
    }

    .subtable {
        width: 80%;
        margin: 0 auto;
    }



</style>
<body>
<header class="banner">缴费明细列表</header>

<div class="ui-container">
    <table class="event-list" id="miantable">
        <colgroup>
            <col width="40%"/>
            <col width="20%"/>
            <col width="40%"/>
        </colgroup>
        <thead>
        <tr>
            <th>项目名称</th>
            <th>缴费金额</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>钱罐</td>
            <td>80元</td>
            <td>2017-01-12 12:12:12</td>
        </tr>
        <tr>
            <td colSpan="3">
            <ul class="subtable">
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
            </ul></td>
        </tr>
        <tr>
            <td>钱罐</td>
            <td>80元</td>
            <td>2017-01-12 12:12:12</td>
        </tr>
        <tr>
            <ul class="subtable">
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
                <li>显示<span style="float:right">名称</span></li>
            </ul>
        </tr>
        </tbody>
    </table>
</div>
<script src="../js/jquery-1.10.2.js"></script>
<script>
    $('#miantable').on('click','tr',function () {
        $(this).closest('.subtable').toggle('show');
    });
</script>
</body>
</html>